<template>
  <div class="box">
    <mybanner></mybanner>
    <ul>
      <li v-for="item in reying" :key="item.id">
        <router-link :to="'/item/'+item.id">
            <img v-lazy="item.img"/>
            <div class="text">
            <span class="move_name">
                {{ item.nm }}
                <img class="box_2D" v-show="item.ver.indexOf('IMAX') != -1" src="https://s0.meituan.net/bs/myfe/canary/file/touchnode/images/dpmmweb/hot-tab/img/base64/v2dimax.png"/>
            </span>
            <p v-if="item.globalReleased === true && item.mk != 0.0">
                观众评<span class="pinf pinf1">{{ item.mk }}</span>
            </p>
            <p v-if="item.globalReleased === true && item.mk === 0.0">
                {{ item.scoreLabel }}
            </p>
            <p v-if="item.globalReleased === false">
                <span class="pinf pinf2">{{ item.wish }}</span>想看
            </p>
            <p class="zhuy">{{ item.desc }}</p>
            <p class="zhuy" v-if="item.globalReleased === true">
                {{ item.showInfo }}
            </p>
            <p class="zhuy" v-if="item.globalReleased === false">
                {{ item.pubDesc }}
            </p>
            </div>  
            <a class="go" href="#" :style="{background: item.showStateButton.color }">{{ item.showStateButton.content }}</a>
        </router-link>
      </li>
    </ul>
    <router-link to="/" class="tip-open-app">
      <img src="https://p1.meituan.net/scarlett/87654d5e4e5e057206969c3abb8e09f33151.png" />
      <span>打开App</span>
    </router-link>
  </div>
</template>

<script>
import Mybanner from "../../components/mybanner.vue";
//引入axios
import axios from "axios";
export default {
    name:"reying",
    data(){
    return {
      reying:[]//电影数据
    };
  },
  mounted(){
    //使用axios获取数据
    axios.get("/api/mmdb/movie/v3/list/hot.json?ct=%E6%B7%B1%E5%9C%B3&ci=30&channelId=4").then(rel=>{
      console.log(rel);
      //图片w.h会报错，修改
      rel.data.data.hot.forEach(item => {
        item.img = item.img.replace("w.h","128.180");
      });
      this.reying = rel.data.data.hot;
      console.log(this.reying);
    });
  },
  components:{
      Mybanner,
  }
}
</script>

<style scoped>
a {
    text-decoration: none;
    display: block;
}

a.router-link-active span{
    color:#fff;
}

ul,
li {
    list-style: none;
}

.box {
    display: flex;
    justify-content: space-around;
    background: #fff;
}

.box ul {
    width: 90%;
    margin-top:200px;
}

.box ul li a{
    width: 100%;
    display: flex;
    font-size: .37333333333333335rem;
    justify-content: center;
    align-items: center;
    align-content: space-around;
    border-bottom: 1px solid #ccc;
    color: #666;
    padding:.26666666666666666rem 0;
}

.box img {
    width: 1.7066666666666668rem;
    height: 2.4rem;
}

.text {
    margin-left: .26666666666666666rem;
    width: 85%;
}

.box ul li .go {
    width: 1.8666666666666667rem;
    height: .8rem;
    border-radius: .13333333333333333rem;
    text-align: center;
    color: #fff;
    line-height: .8rem;
    margin-left: .8rem;
    padding:0;
}

.text .move_name {
    font-size: .4266666666666667rem;
    font-weight: bold;
    display: block;
    margin-bottom: .26666666666666666rem;
    color:#333;
}
.pinf{
    color: #faaf00;
    font-weight: 900;
}

.pinf1{
    padding:.13333333333333333rem;
}

.text .zhuy {
    width: 4.8rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.hot-item {
    font-size: .37333333333333335rem;
    color: #666;
    text-align: center;
    margin: 0 2.333333vw;
    font-weight: 700;
}


.tip-open-app {
    position: fixed;
    right: 0;
    bottom: 3.7333333333333334rem;
    width: 2.933333333333333rem;
    height: 1.0133333333333334rem;
    line-height: .76rem;
    z-index: 10;
    opacity: .94;
    background-image: linear-gradient(134deg, #fb3333, #ff5269 75%);
    box-shadow: 0 .05333333333333334rem .10666666666666667rem 0 rgb(160 44 41 / 15%);
    border-radius: .5333333333333333rem 0 0 .5333333333333333rem;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
}

.tip-open-app img {
    width: .5333333333333333rem;
    height: .5333333333333333rem;
}

.tip-open-app span {
    font-size: .37333333333333335rem;
    margin-left: .26666666666666666rem;
}

.box .box_2D {
    width: 1.2rem;
    height: .4rem;
    display: inline-block;
    margin-top: .10666666666666667rem;
}
</style>